<template>
  <view class="login__form-comp">
    <view class="login__form-comp-wrap">
      <input
        v-model="mobile"
        type="number"
        placeholder="请输入手机号码"
        placeholder-class="login__form-comp-input-placeholder"
        :class="{ 'login__form-comp-input': true, 'has-error': error.mobile }"
        @focus="clearError('mobile')"
      />
      <view class="login__form-comp-error-text">{{ error.mobile }}</view>
    </view>
    <view class="login__form-comp-wrap">
      <input
        v-model="password"
        password
        type="password"
        placeholder="请输入密码"
        placeholder-class="login__form-comp-input-placeholder"
        :class="{ 'login__form-comp-input': true, 'has-error': error.password }"
        @focus="clearError('password')"
      />
      <view class="login__form-comp-error-text">{{ error.password }}</view>
    </view>
    <view class="login__form-comp-other">
      <text class="login__form-comp-other-item" @click="handleResetPassword">
        忘记密码
      </text>
      <!-- <text class="login__form-comp-other-item">验证码登录</text> -->
    </view>
    <button lang="zh_CN" class="login__form-comp-btn" @click="doLogin">
      登录
    </button>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  props: {},

  computed: {
    ...mapGetters(['redirect']),
  },

  data() {
    return {
      mobile: '',
      password: '',
      error: {
        mobile: '',
        password: '',
      },
    };
  },

  methods: {
    clearError(name = '') {
      this.error[name] = '';
    },

    doLogin() {
      let isOk = true;
      const mobileReg = /^1\d{10}$/;
      if (!mobileReg.test(this.mobile)) {
        this.error.mobile = '手机号码格式错误';
        isOk = false;
      }
      if (!this.mobile) {
        this.error.mobile = '请输入手机号码';
        isOk = false;
      }
      if (!this.password) {
        this.error.password = '请输入密码';
        isOk = false;
      }
      if (isOk) {
        this.$http({
          method: 'POST',
          url: '/api/front/user/login',
          data: {
            wey: 'mobile+password',
            mobile: this.mobile,
            password: this.password,
          },
          skipToast: true,
          errorText: '登录失败',
        }).then((res) => {
          if (res.ok) {
            // 登录成功
            this.$store.commit('showSuccessTips', '登录成功');
            this.$store.commit('login', {
              cache: true,
              token: res.token,
              userInfo: res.userInfo,
            });
            const {
              type = 'switchTab',
              url = encodeURIComponent('/pages/index/index'),
            } = this.redirect;
            uni[type]({ url: decodeURIComponent(url) });
          } else if (!res.ok && res.error) {
            this.error = { ...this.error, ...res.error };
          } else {
            uni.showToast({ title: res.msg || '服务器繁忙', icon: 'none' });
          }
        });
      }
    },

    /**
     * 重置密码
     */
    handleResetPassword() {
      uni.navigateTo({ url: '/sub-packages/reset-password/index' });
    },
  },
};
</script>

<style lang="scss">
.login__form-comp {
  width: 100%;

  &-input {
    height: 88rpx;
    line-height: 88rpx;
    color: $font-color-normal;
    font-size: 36rpx;
    word-spacing: 2rpx;
    border-bottom: 1px solid #ececec;
    padding: 0 10rpx;

    &-placeholder {
      font-size: 32rpx;
      line-height: 88rpx;
    }

    &.has-error {
      border: 1rpx solid rgba($color: $border-color-error, $alpha: 0.65);
      border-radius: 10rpx;
    }
  }

  &-error-text {
    height: 30rpx;
    color: rgba($color: $border-color-error, $alpha: 0.65);
    font-size: 24rpx;
    margin-bottom: 16rpx;
  }

  &-btn {
    color: #fff;
    background: linear-gradient(to right, #2f6bff, #01d0ff);
    box-shadow: 0 2px 4px #b7e7f3;
    width: 100%;
    border-radius: 10rpx;

    &::after {
      border: none;
    }

    &:active {
      background: linear-gradient(to right, #0e52fa, #03b1d8);
    }
  }

  &-other {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    color: $font-color-base;
    font-size: 26rpx;
    padding: 0 0 10rpx;
    margin-bottom: 48rpx;

    &-item {
      &:active {
        color: $font-color-dark;
      }
    }
  }
}
</style>
